<template>
  <div class="user_list">
    <div class="operate_box"></div>
    <div class="user_filter">
      <el-form
        :inline="true"
        :model="queryParams"
        class="demo-form-inline"
      >
        <el-form-item label="用户名">
          <el-input
            v-model="queryParams.username"
            placeholder="请输入用户名"
            clearable
            style="width: 13rem"
          />
        </el-form-item>
        <el-form-item label="邮箱地址">
          <el-input
            v-model="queryParams.emailAddress"
            placeholder="请输入邮箱地址"
            clearable
            style="width: 13rem"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary">查询</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="user_list">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="username" label="用户姓名" />
        <el-table-column prop="email" label="用户邮箱" />
        <el-table-column prop="nickname" label="用户昵称">
          <template #default="{ row }">
            <span>{{
              row.nickname ? row.nickname : '暂无昵称'
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <template #default="{ row }">
            <el-popconfirm
              class="box-item"
              title="您确定要删除此用户吗"
              placement="top-start"
              @confirm="handleDelete(row)"
            >
              <template #reference>
                <el-button link type="danger"
                  >删除
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-affix position="bottom" :offset="20">
      <div class="pagination_box">
        <Pagination
          v-model:currentPage="queryParams.pageNumber"
          v-model:pageSize="queryParams.pageSize"
          :total="queryParams.total"
          @pageChange="handlePageChange"
        ></Pagination>
      </div>
    </el-affix>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import {
  deleteSubUser,
  getCurrentAccountSubUsers,
} from '@/api/subUserManagement.js'
import { useUserStore } from '@/stores/modules/userInfo.js'
import { ElMessage } from 'element-plus'
// import Pagination from '@/components/Pagination.vue'

const tableData = ref([])

// 筛选 查询参数

// 分页参数
const queryParams = ref({
  pageNumber: 1,
  pageSize: 10,
  total: 0,
  username: '',
  emailAddress: '',
  sortField: 'registrationDate',
  sortOrder: 'ASC',
})

const userStore = useUserStore()

// 获取所有子用户列表
const getCurrentAccountSubUsersFn = async () => {
  const res = await getCurrentAccountSubUsers(
    queryParams.value,
  )
  // console.log(res)
  tableData.value = res.content.filter(
    (item) => item.userId !== userStore.userInfo.userId,
  )
  queryParams.value.total = res.totalElements
}
onMounted(() => {
  getCurrentAccountSubUsersFn()
})

// 分页变化
const handlePageChange = ({ currentPage, pageSize }) => {
  queryParams.value.pageNumber = currentPage
  queryParams.value.pageSize = pageSize
  getCurrentAccountSubUsersFn()
}

// 删除子用户
const handleDelete = async (row) => {
  // console.log(row)
  await deleteSubUser({
    userId: row.userId,
  })
  ElMessage.success('删除成功')
  getCurrentAccountSubUsersFn()
}
</script>

<style scoped>
.operate_box {
  margin-top: 15px;
  margin-bottom: 15px;
}

.pagination_box {
  height: 50px;
}
</style>
